<template>
  <div class="videobox" ref="videobox">

  </div>
</template>

<script>

export default {
  data () {
    return {
      peer: null,
      remoteStream: null,
      showArrow: true,
      userId: 1, // 主持人id
      changeHeight: false, // 是否需要让videoBox居中
      minPage: false, // 当前videoBox是否为小高度（小于三个视频）
      startCf: true,
      currentPage: 0,
      maxSwiperHeight: 0
    }
  },
  computed: {
    // userList () {
    //   const hostArr = this.$store.state.room.userList.filter(item => item.host && item.online)
    //   const noHostArr = this.$store.state.room.userList.filter(item => !item.host && item.online)
    //   return [...hostArr, ...noHostArr]
    //   // return [{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 3, id: 3 }, { name: 4, id: 4 }, { name: 5, id: 5 }, { name: 6, id: 6 }, { name: 7, id: 7 }, { name: 8, id: 8 }, { name: 9, id: 9 }, { name: 10, id: 10 }, { name: 11, id: 11 }]
    // },
    // swiperList () {
    //   const list = []
    //   if (this.userList.length) {
    //     const length = this.userList.length
    //     const page = Math.ceil(length / 4)
    //     for (let i = 0; i < page; i++) {
    //       list[i] = []
    //       this.userList.forEach((item, index) => {
    //         if (i * 4 < (index + 1) && (index + 1) <= (i + 1) * 4) {
    //           list[i].push(item)
    //         }
    //       })
    //     }
    //   }
    //   return list
    // },
    localStream () {
      return this.$store.state.room.localStream
    },
    localVolume () {
      return this.$store.state.room.localVolume
    }
  },
  watch: {
    // swiperList: {
    //   deep: true,
    //   immediate: true,
    //   handler (val) {
    //     if (val.length) {
    //       if (this.$refs.swiperBox && this.$refs.videobox) {
    //         this.changePage(this.currentPage)
    //       }
    //     }
    //   }
    // }
  },
  // methods: {
  //   changePage (index) { // 翻页监控是否需要滚动条
  //     this.currentPage = index
  //     // this.showArrow = false
  //     // this.$refs.swiperBox.children[0].children[0].children[0].style.display = 'none'
  //     // this.$refs.swiperBox.children[0].children[0].children[1].style.display = 'none'
  //     setTimeout(() => {
  //       if (this.swiperList[index] && this.swiperList[index].length < 3) {
  //         this.minPage = true
  //       } else {
  //         this.minPage = false
  //         if (this.$refs.swiperBox.children[0].children[0].children[1]) {
  //           this.$refs.swiperBox.children[0].children[0].children[0].style.top = ''
  //           this.$refs.swiperBox.children[0].children[0].children[1].style.top = ''
  //         }
  //       }
  //       this.$nextTick(() => {
  //         this.monitorScroll()
  //       })
  //       // this.$refs.swiperBox.children[0].children[0].children[0].style.display = 'block'
  //       // this.$refs.swiperBox.children[0].children[0].children[1].style.display = 'block'
  //     }, 450)
  //   },
  //   monitorScroll () { // 监听页面尺寸变化 使得swiper盒子居中
  //     if (this.$refs.swiperBox && this.$refs.videobox) {
  //       // const clientWidth = document.body.clientWidth
  //       // const scale = clientWidth / 1920
  //       const rem = document.documentElement.style.fontSize.split('px')[0]
  //       const swiperHeight = this.$refs.swiperBox.clientHeight
  //       const videoHeight = this.$refs.videobox.clientHeight
  //       this.maxSwiperHeight = videoHeight - rem * 9.64
  //       if (videoHeight > swiperHeight && !this.minPage) {
  //         this.changeHeight = true
  //         this.$refs.swiperBox.style.marginTop = 0
  //         this.maxSwiperHeight = 0
  //       } else {
  //         this.changeHeight = false
  //         if (this.minPage && this.maxSwiperHeight > 0 && this.currentPage > 0) {
  //           this.$nextTick(() => {
  //             this.$refs.swiperBox.style.marginTop = this.maxSwiperHeight / 2 + 'px'
  //             this.$refs.swiperBox.children[0].children[0].children[0].style.top = rem * 5.265 + this.maxSwiperHeight / 2 + 'px'
  //             this.$refs.swiperBox.children[0].children[0].children[1].style.top = rem * 5.265 + this.maxSwiperHeight / 2 + 'px'
  //           })
  //           //
  //         }
  //         if (swiperHeight > rem * 4.66 && swiperHeight <= rem * 4.88) {
  //           this.$refs.swiperBox.style.marginTop = 0
  //           if (this.$refs.swiperBox.children[0].children[0].children[1]) {
  //             this.$refs.swiperBox.children[0].children[0].children[0].style.top = ''
  //             this.$refs.swiperBox.children[0].children[0].children[1].style.top = ''
  //           }
  //         }
  //       }
  //     }
  //   }
  // },
  methods: {

  },
  mounted () {
    // this.monitorScroll()
    // this.changePage(0)
    // window.addEventListener('resize', this.monitorScroll)
  },
  beforeDestroy () {
    // window.removeEventListener('resize', this.monitorScroll)
  }
}
</script>

<style lang="scss" scoped>
    .videobox{
        // position: relative;
        // width: 83.13%;
        // // padding: 12px 12px 0;
        // height: 100%;
        // float: left;
        // overflow: auto;
        // &::-webkit-scrollbar {display:none}
        // .gap-r{
        //     margin-right: 12px;
        // }
        // .gap-b{
        //     margin-bottom: 12px;
        // }
        // .testbox{
        //     width: 780px;
        //     height: 464px;
        //     float: left;
        //     background-color: black;
        //     span{
        //         width: 96px;
        //         height: 96px;
        //         border-radius: 50%;
        //         background: linear-gradient(316deg, #4A53EF 0%, #6971FE 100%);
        //         font-size: 24px;
        //         font-family: PingFangSC-Regular, PingFang SC;
        //         font-weight: 400;
        //         color: #FFFFFF;
        //         line-height: 96px;
        //     }
        // }
        // ::v-deep .el-carousel{
        //   height: 964px;
        //   &::-webkit-scrollbar {display:none}
        //   .el-carousel__container{
        //     height: 100%;
        //   }
        //   .el-carousel__indicators--outside{
        //     display: none;
        //   }
        //   .el-carousel__item{
        //     padding: 12px 12px 0;
        //   }
        //   .el-carousel__arrow{
        //     font-size: 25px;
        //     line-height: 48px;
        //     border-radius: unset;
        //     width: 48px;
        //     height: 48px;
        //     position: fixed;
        //     top: 500px;
        //     background: rgba(0, 0, 0, 0.5);
        //     transition: all 0s;
        //   }
        //   .el-carousel__arrow--left{
        //     left: 0;
        //   }
        //   .el-carousel__arrow--right{
        //     right: 324px;
        //   }
        //   [class*=" el-icon-"], [class^=el-icon-]{
        //     vertical-align: middle;
        //   }
        // }
        // ::v-deep .el-carousel.mincontain{
        //   height: 485px !important;
        // }
        // .swiperBox{
        //   width: 100%;
        //   position: absolute;
        //   top: 50%;
        //   transform: translateY(-50%);
        //   ::v-deep .el-carousel__arrow{
        //     font-size: 25px;
        //     line-height: 48px;
        //     border-radius: unset;
        //     width: 48px;
        //     height: 48px;
        //     position: absolute !important;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     background: rgba(0, 0, 0, 0.5);
        //   }
        //   ::v-deep .el-carousel__arrow--left{
        //     left: 0 !important;
        //   }
        //   ::v-deep .el-carousel__arrow--right{
        //     right: 0 !important;
        //   }
        // }
        // .btmCenter{
        //   top: 50%;
        //   transform: translateY(-50%);
        // }
    }
</style>
